<template>
  <NewCard title="收银台" isright="isright">
    <template slot="right">
      <!-- <DownTime @EventTimeIsUp="TimeIsUp" :time="orderinfo.minutes"> </DownTime>后结束订单 -->
      <DownTime @EventTimeIsUp="TimeIsUp" :time="getMinutes(orderinfo.minutes)">
      </DownTime>后关闭订单
    </template>
    <div class="pay">
      <div class="pay_main">
        <el-row>
          <el-col :span="24" v-if="orderinfo.type == '5'">
            <p class="inputTitle">咨询内容</p>
            <ul class="detailList">
              <li>
                <span>问题类型</span>
                <div class="detailPage">
                  <p>{{ orderinfo.goods && orderinfo.goods.type }}</p>
                </div>
              </li>
              <li>
                <span>咨询问题</span>
                <div class="detailPage">
                  <p>{{ orderinfo.goods && orderinfo.goods.question }}</p>
                </div>
              </li>

              <li v-if="orderinfo.goods && orderinfo.goods.files">
                <span>问题附件</span>
                <div class="files-list">
                  <a
                    v-for="(file, index) in orderinfo.goods &&
                    orderinfo.goods.files"
                    :key="index"
                    :href="file">
                    <span class="el-icon-document">
                      {{
                        file.substring(
                          file.lastIndexOf("/") + 1,
                          file.lastIndexOf(".")
                        )
                      }}</span>
                  </a>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col :span="24" v-if="orderinfo.type == '5'">
            <p class="inputTitle">订单信息</p>
            <ul class="detailList">
              <li>
                <span>订单编号</span>
                <div class="detailPage">
                  <p>{{ orderinfo.orderNo }}</p>
                </div>
              </li>
              <li>
                <span>订单类型</span>
                <div class="detailPage">
                  <p>
                    {{ orderinfo && orderinfo.type | switchType }}
                  </p>
                </div>
              </li>
              <li>
                <span>咨询专家</span>
                <div class="detailPage">
                  <p>{{ orderinfo.goods && orderinfo.goods.consultGrade }}</p>
                </div>
              </li>
              <li>
                <span>创建时间</span>
                <div class="detailPage">
                  <p>{{ orderinfo.createdTime }}</p>
                </div>
              </li>
              <li>
                <span>订单金额</span>
                <div class="detailPage">
                  <p>{{ orderinfo && orderinfo.amount | sumFilters }}</p>
                </div>
              </li>
            </ul>
          </el-col>
          <el-col :span="24" v-if="orderinfo.type != ('5'||'20'||'21')">
            <p class="inputTitle">订单信息</p>
            <ul class="detailList">
              <li>
                <span>订单编号</span>
                <div class="detailPage">
                  <p>{{ orderinfo.orderNo }}</p>
                </div>
              </li>
              <li>
                <span>订单类型</span>
                <div class="detailPage">
                  <p>
                    {{ orderinfo && orderinfo.type | switchType }}
                  </p>
                </div>
              </li>
              <li>
                <span>创建时间</span>
                <div class="detailPage">
                  <p>{{ orderinfo.createdTime }}</p>
                </div>
              </li>
              <li>
                <span>订单金额</span>
                <div class="detailPage">
                  <p>{{ orderinfo && orderinfo.amount | sumFilters }}</p>
                </div>
              </li>
            </ul>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24"> 
          <Compay ref="compay" :orderinfo="oderlist" :acceptEmail="$store.state.user.email"></Compay>
          </el-col>
        </el-row>
      </div>
      <div class="payBtn" v-if="payBtnShow">
        <p>
          应付问金：<span>{{ orderinfo && orderinfo.amount | sumFilters }}</span>
        </p>
        <el-button round @click="askGoldPay">立即支付</el-button>
      </div>
    </div>
  </NewCard>
</template>

<script>
import DownTime from "@/components/downTime/index.vue";
import { timestampConversion, changeType } from "@/wss/utils/wss.js";
import NewCard from "@/wss/components/newCard.vue";
import Compay from "@/BMViews/components/Compay/index.vue";
import { getDepositVoucherPayApi } from "@/BMViews/api/financial/deposit.js";
export default {
  name: "Pay",
  props: {
    orderinfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
    getConsumptionapilistfn: {
      type: Function,
      default: () => {},
    },
  },
  components: { NewCard, Compay, DownTime },
  data() {
    return {
      isright: true, //显示时间提示支付
      email: "", //电邮
      // acceptEmail: "", //接收邮箱
      activeName: "askGold", //默认显示问金支付
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", //头像
      askRadio: "2",
      oderlist:{
        id:"",
        amount:""
      },

      payBtnShow: true, // 当前底部支付按钮的显示隐藏
    };
  },
  mounted() {

    this.oderlist.id= this.orderinfo.id
     this.oderlist.amount= this.orderinfo.amount
    // 当切换到二维码支付的时候要隐藏底部的按钮
    this.$bus.$on("hidePayBtn", (name) => {
      console.log(name, "---------------------");
      if (name == "scanQr") {
        this.payBtnShow = false;
      } else {
        this.payBtnShow = true;
      }
    });
  },
  methods: {
    getMinutes(time) {
      // 如果是"", undefined, null会隐式转换成0，就会默认
      // if (["", undefined, null].includes(time)) {
      //   return "wssOder";
      // } else {
      //   return time;
      // }
      console.log(time);
      return time;
    },
    TimeIsUp() {},
    // 问金支付
    async askGoldPay() {
      let circleId = this.$refs.compay.getCirecleDefaultPay();
      let { code, msg } = await getDepositVoucherPayApi({
        circleId,
        orderId: this.orderinfo.id,
        email: this.$store.state.user.email
      });
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success",
      });
      this.getConsumptionapilistfn();
      // 支付成功后跳转到我的已购
       this.$router.push('/Bm-personalCenter/homepage')
    },
  },
  filters: {
    switchType(value) {
      return changeType(value);
    },
  },
};
</script>

<style scoped>
.hintRight {
  font-size: 14px;
  color: #f87a23;
}
::v-deep .el-card__body {
  position: relative;
}
ul,
p {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pd30 {
  padding: 0 30px;
}
::v-deep .top .right {
  color: #f87a23;
  font-size: 12px;
}
/* 支付信息 */
.pay_main {
  margin-bottom: 70px;
  margin-top: 15px;
}
.pay_main .el-card {
  border-radius: 12px;
}
::v-deep .pay_main .el-card__body {
  padding: 20px;
}
.pay_main h3 {
  margin: 0;
  margin-bottom: 12px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}
.pay_main p {
  font-size: 14px;
  color: #999;
  margin: 0;
  line-height: 24px;
}
.pay_main .el-row {
  margin-top: 15px;
}
::v-deep .pay_main .el-row .el-input__inner {
  border-radius: 8px;
  height: 44px;
  line-height: 44px;
}
.pay_main .el-row .acceptEmail {
  border: 0;
  padding: 5px 0;
  margin: 7px 0;
  margin-right: 10px;
  font-size: 14px;
  color: #bababa;
  background: #fff;
  cursor: pointer;
}
.pay_main .el-row .acceptEmail:hover {
  color: #f87a23;
}
.pay_main .inputTitle {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}
.pay_main .inputTitle span {
  font-size: 14px;
  color: #999;
  font-weight: 400;
}
::v-deep .pay_main .el-tabs__header {
  border: 0;
  margin-bottom: 24px;
}
::v-deep .pay_main .el-tabs__nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border: 0;
}
::v-deep .pay_main .el-tabs__item {
  width: 49%;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  border: 0;
  background-color: #fafafa;
}
::v-deep .pay_main .el-tabs__item.is-active {
  background-color: #f1f3ff;
  color: #39486f;
}
::v-deep .pay_main .el-tabs__item:hover {
  color: #39486f;
}

/* 内容详情列表 */
.detailList {
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 15px;
  margin-bottom: 30px;
}
.detailList li {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.detailList li .files-list a{
  display: block;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  margin-bottom: 5px;
}
.detailList li > span {
  display: block;
  width: 17%;
  font-size: 14px;
  color: #999;
}
.detailList li .detailPage {
  width: 83%;
}
.detailList li .detailPage > p {
  width: 100%;
  font-size: 14px;
  color: #222;
}

/* 支付 */
.askGold {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}
.askGold li {
  display: flex;
  margin-bottom: 24px;
}
.askGold li .el-avatar {
  margin-right: 14px;
}
.askGold .askInfo h3 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #333;
}
.askGold .askInfo {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ecedf0;
  padding-bottom: 24px;
}
.askGold .askInfo p {
  font-size: 12px;
  color: #666;
}
.askGold .askInfo button {
  color: #39486f;
  border-color: #39486f;
  padding: 5px 15px;
}
::v-deep .askInfo .el-radio__label {
  display: none;
}
::v-deep .askInfo .el-radio .el-radio__inner {
  width: 24px;
  height: 24px;
  border-color: #bbbbbb;
  background: #fff;
}
::v-deep .askInfo .el-radio .is-disabled .el-radio__inner {
  background: #f2f2f2;
}
::v-deep .askInfo .el-radio .is-checked .el-radio__inner {
  border-color: #f87a23;
  background: #f87a23;
}
::v-deep .askInfo .el-radio__input.is-checked .el-radio__inner::after {
  content: "";
  width: 11px;
  height: 7px;
  border: 3px solid white;
  border-top: transparent;
  border-right: transparent;
  text-align: center;
  display: block;
  position: absolute;
  top: 6px;
  left: 5px;
  vertical-align: middle;
  transform: rotate(-45deg);
  border-radius: 0px;
  background: none;
}
.payBtn {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: 100%;
  background-color: #fff;
  border-top: 1px solid #ecedf0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
}
.payBtn p {
  margin: 0;
  font-size: 14px;
  font-weight: bold;
}
.payBtn p > span {
  color: #f87a23;
  font-size: 16px;
}
.payBtn .el-button {
  background-color: #f87a23;
  border-color: #f87a23;
  color: #fff;
  font-size: 14px;
  padding: 10px 50px;
}
.payBtn .el-button:hover {
  opacity: 0.9;
}

.scanQr {
  text-align: center;
}
.scanQr img {
  width: 150px;
}
.scanQr p {
  color: #f87a23;
  font-size: 18px;
  font-weight: bold;
}
.scanQr span {
  font-size: 12px;
  color: #999;
}
</style>